import { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { createBrowserHistory } from 'history'

import { Index } from '../pages/index/index'
import { Home } from '../pages/home/home'
import { Index as Example } from '../pages/example'

function NoMatch() {
  return (
    <p>404!</p>
  )
}

const routes = [
  {
    path: '/',
    exact: true,
    component: Index
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/example',
    component: Example
  },
  {
    path: '*',
    component: NoMatch
  },
  // {
  //   path: '/tacos',
  //   component: Tacos,
  //   routes: [
  //     {
  //       path: '/tacos/bus',
  //       component: Bus
  //     },
  //     {
  //       path: '/tacos/cart',
  //       component: Cart
  //     }
  //   ]
  // }
]

const { history } = createBrowserHistory()

export class RouterComponent extends Component {
  render() {
    return (
      <Router histor={history}>
        <Switch>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              component={route.component}
            />
          ))}
        </Switch>
      </Router>
    )
  }
}


// const { history } = createBrowserHistory()

// export class RouterComponent extends Component {
//   render() {
//     return (
//       <Router histor={history}>
//         <Switch>
//           <Route path='/' exact component={Index} />
//           <Route path='/home' component={Home} />
//         </Switch>
//       </Router>
//     )
//   }
// }